<template>
  <a-card :body-style="{ padding:0}"> 
    <a-row :gutter="24" style="margin-top: 0px;" :body-style="{ padding:0}">
      <a-col span="4">
        <!-- <chart-card :loading="loading" title="今日订单量" :total="cardCount | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data-source="chartData" />
          </div>
          <template slot="footer">今日订单量:<span>{{ todaySoBills }}</span></template>
        </chart-card> -->
        <a-card>
          <a-statistic
            title="今日订单量"
            :value="dayofvalue.cursovalue"
            :precision="2"
            suffix="元"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <!-- <template #prefix>
              <a-icon type="arrow-up" />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col span="4">
        <!-- <chart-card :loading="loading" title="出库量" :total="NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data-source="chartData" />
          </div>
          <template slot="footer"
            >今日出库数量：<span>{{ todayOutStocks }}</span></template
          >
        </chart-card> -->
        <a-card>
          <a-statistic
            title="今日发货量"
            :value="dayofvalue.curdeliveryqty"
            :precision="2"
            suffix="个"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <!-- <template #prefix>
              <a-icon type="arrow-up" />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col span="4">
        <!-- <chart-card :loading="loading" title="出库量" :total="NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data-source="chartData" />
          </div>
          <template slot="footer"
            >今日出库数量：<span>{{ todayOutStocks }}</span></template
          >
        </chart-card> -->
        <a-card>
          <a-statistic
            title="今日出库量"
            :value="dayofvalue.curoutqty"
            :precision="2"
            suffix="个"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <!-- <template #prefix>
              <a-icon type="arrow-up" />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col span="4">
        <a-card>
          <a-statistic
            title="今日应收金额"
            :value="dayofvalue.curarvalue"
            :precision="2"
            suffix="元"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <!-- <template #prefix>
              <a-icon type="arrow-up" />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col span="4">
        <a-card>
          <a-statistic
            title="今日采购订单额"
            :value="dayofvalue.curpovalue"
            :precision="2"
            suffix="元"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <!-- <template #prefix>
              <a-icon type="arrow-up" />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
      <a-col span="4">
        <a-card>
          <a-statistic
            title="今日应付金额"
            :value="dayofvalue.curapvalue"
            :precision="2"
            suffix="元"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <!-- <template #prefix>
              <a-icon type="arrow-up" />
            </template> -->
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24">
        <a-card  style="margin-top: 10px" :bordered="true" :body-style="{ padding: 0 }">
          <a-steps current="-1" type="navigation" size="small" @change="onChange">
            <a-step title="采购订单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="收货通知单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购入库单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购对账单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购应付单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购付款申请单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购付款单">
              <a-icon slot="icon" type="solution" />
            </a-step>
          </a-steps>
          <a-divider style="padding: 0px;" />
          <a-steps current="-1" type="navigation" size="small" @change="saleOnChange">
            <a-step title="销售订单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="销售发货单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="销售出库单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="销售对账单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="销售应收单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="收款单">
              <a-icon slot="icon" type="solution" />
            </a-step>
          </a-steps>
          <a-divider style="padding: 0px;" />
          <a-steps current="-1" type="navigation" size="small" @change="poReturnOnChange">
            <a-step title="退货采购订单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购入库退货">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购对账单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购应付单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="采购付款单">
              <a-icon slot="icon" type="solution" />
            </a-step>
          </a-steps>
          <a-divider />
          <a-steps current="-1" type="navigation" size="small" @change="saleReturnOnChange">
            <a-step title="退货销售订单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="销售出库退货单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="销售对账单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="销售应收单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="销售收款单">
              <a-icon slot="icon" type="solution" />
            </a-step>
          </a-steps>
          <a-divider />
          <a-steps current="-1" type="navigation" size="small" @change="mestaskOnChange">
            <a-step title="销售订单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="生产任务单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="生产领料单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="工序计划单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="派工单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="报工单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="工序转移单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="返工单">
              <a-icon slot="icon" type="solution" />
            </a-step>
            <a-step title="生产入库单">
              <a-icon slot="icon" type="solution" />
            </a-step>
          </a-steps>
        </a-card>
    </a-row>
  </a-card>
</template>

<script>
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import ChartCard from '@/components/ChartCard'
import MiniBar from '@/components/chart/MiniBar'
import MiniArea from '@/components/chart/MiniArea'
import IndexBar from '@/components/chart/IndexBar'
import BarMultid from '@/components/chart/BarMultid'
import DashChartDemo from '@/components/chart/DashChartDemo'
import { getAction } from '../../api/manage'

export default {
  name: 'IndexBdc',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    DashChartDemo,
    BarMultid,
    IndexBar
  },
  data() {
    return {
      stepcurrent: 0,
      loading: true,
      cardCount: {
        sll: 100,
        bjl: 87,
        isll: 15,
        ibjl: 9
      },

      todaySll: 60,
      todayBjl: 54,
      todayISll: 13,
      todayIBjl: 7,

      chartData: {
        sll: [],
        bjl: [],
        isll: [],
        ibjl: []
      },
      registerTypeList: [
        {
          text: '销售订单'
        },
        {
          text: '发货通知单'
        },
        {
          text: '出库单'
        },
        {
          text: '销售对账单'
        }
      ],

      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset'
      },

      // dataSource1: [],
      // dataSource2: [],
      // columns: dataCol1,
      // columns2: dataCol2,
      ipagination1: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      ipagination2: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      indexRegisterType: '转移登记',
      indexBottomTab: '1',
      dayofvalue:{},
      url:{
        getdayofvalue:'/base/basequeryreport/getcurofvalue',
      }
    }
  },
  methods: {
    async getCurrentDayOfValue(){
      let curvalueres = await getAction(this.url.getdayofvalue);
      if(curvalueres.success){
        this.dayofvalue = curvalueres.result;
      }
    },
    mestaskOnChange(current){
      if (current == 0) {
        //销售订单
        this.$router.push({ path: '/erp/so/sobill/modules/ScmsoForm' })
      } else if (current == 1) {
        //生产任务单
        this.$router.push({ path: '/mes/task/modules/MestaskForm' })
      } else if (current == 2) {
        //工序领料单
        this.$router.push({ path: '/mes/procstorerequire/modules/MesprocstorerequireForm' })
      } else if (current == 3) {
        //工序计划单
        this.$router.push({ path: '/mes/procplan/modules/MesprocplanForm' })
      } else if (current == 4) {
        //派工单
        this.$router.push({ path: '/mes/dispatchorder/modules/MesopdispatchorderForm' })
      }else if (current == 5) {
        //报工单
        this.$router.push({ path: '/mes/mesreport/modules/MesreportForm' })
      }else if (current == 6) {
        //报工单
        this.$router.push({ path: '/mes/proctranorder/modules/MesproctranorderForm' })
      }else if (current == 7) {
        //报工单
        this.$router.push({ path: '/mes/reworkorder/modules/MesreworkorderForm' })
      }else if (current == 8) {
        //报工单
        this.$router.push({ path: '/erp/inventory/102instock/modules/ScminventoyForm' })
      }
    },
    saleReturnOnChange(current){
      if (current == 0) {
        //退货销售订单
        this.$router.push({ path: '/erp/so/soreturnbill/modules/ScmsoreturnForm' })
      } else if (current == 1) {
        //退货销售出库单
        this.$router.push({ path: '/erp/inventory/201returnoutstock/modules/ScmoutinventoryForm' })
      } else if (current == 2) {
        //销售对账单
        this.$router.push({ path: '/erp/so/soaccount/modules/ScmaccountForm' })
      } else if (current == 3) {
        //销售应收单
        this.$router.push({ path: '/erp/so/saleinvoice/modules/ScmsaleinvoiceForm' })
      } else if (current == 4) {
        //销售收款单
        this.$router.push({ path: '/erp/arap/receipt/modules/ReceiptbillForm' })
      }
    },
    poReturnOnChange(current) {
      if (current == 0) {
        //退货采购订单
        this.$router.push({ path: '/erp/po/returnpo/modules/ScmReturnpoForm' })
      } else if (current == 1) {
        //采购入库退货
        this.$router.push({ path: '/erp/inventory/101returninstock/modules/ScminventoyForm' })
      } else if (current == 2) {
        //采购对账单
        this.$router.push({ path: '/erp/po/poaccount/modules/ScmaccountForm' })
      } else if (current == 3) {
        //采购应付单
        this.$router.push({ path: '/erp/po/purinvoice/modules/ScmpurinvoiceForm' })
      } else if (current == 4) {
        //采购付款单
        this.$router.push({ path: '/erp/arap/payment/modules/PaymentForm' })
      }
    },
    saleOnChange(current) {
      if (current == 0) {
        //销售订单
        this.$router.push({ path: '/erp/so/sobill/modules/ScmsoForm' })
      } else if (current == 1) {
        //销售发货单
        this.$router.push({ path: '/erp/so/deliveryplan/modules/ScmdeliveryForm' })
      } else if (current == 2) {
        //销售出库单
        this.$router.push({ path: '/erp/inventory/201outstock/modules/ScmoutinventoryForm' })
      } else if (current == 3) {
        //销售对账单
        this.$router.push({ path: '/erp/so/soaccount/modules/ScmaccountForm' })
      } else if (current == 4) {
        //销售应收单
        this.$router.push({ path: '/erp/so/saleinvoice/modules/ScmsaleinvoiceForm' })
      } else if (current == 5) {
        //销售收款单
        this.$router.push({ path: '/erp/arap/receipt/modules/ReceiptbillForm' })
      }
    },
    onChange(current) {
      // console.log('onChange:', current);
      // this.stepcurrent = current;
      if (current == 0) {
        //采购订单
        this.$router.push({ path: '/erp/po/modules/ScmpoForm' })
      } else if (current == 1) {
        //收货通知单
        this.$router.push({ path: '/erp/po/matreceiptreq/modules/ScmmatreceiptreqForm' })
      } else if (current == 2) {
        //采购入库单
        this.$router.push({ path: '/erp/inventory/101instock/modules/ScminventoyForm' })
      } else if (current == 3) {
        //采购对账单
        this.$router.push({ path: '/erp/po/poaccount/modules/ScmaccountForm' })
      } else if (current == 4) {
        //采购应付单
        this.$router.push({ path: '/erp/po/purinvoice/modules/ScmpurinvoiceForm' })
      } else if (current == 5) {
        //采购付款申请
        this.$router.push({ path: '/erp/arap/ap/apreq/modules/ApreqbillsForm' })
      } else if (current == 6) {
        //付款单
        this.$router.push({ path: '/erp/arap/payment/modules/PaymentForm' })
      }
    },
    goPage() {
      this.$message.success('根据业务自行处理跳转页面!')
    },
    changeRegisterType(e) {
      this.indexRegisterType = e.target.value
      if (this.indexBottomTab == '1') {
        this.loadDataSource1()
      } else {
        this.loadDataSource2()
      }
    },
    tableChange1(pagination) {
      this.ipagination1.current = pagination.current
      this.ipagination1.pageSize = pagination.pageSize
      this.queryTimeoutInfo()
    },
    tableChange2(pagination) {
      this.ipagination2.current = pagination.current
      this.ipagination2.pageSize = pagination.pageSize
      this.queryNodeTimeoutInfo()
    },
    getFlowRateNumber(value) {
      return Number(value)
    },
    getPercentFormat(value) {
      if (value == 100) {
        return '超时'
      } else {
        return value + '%'
      }
    },
    getPercentColor(value) {
      let p = Number(value)
      if (p >= 90 && p < 100) {
        return 'rgb(244, 240, 89)'
      } else if (p >= 100) {
        return 'red'
      } else {
        return 'rgb(16, 142, 233)'
      }
    },

    loadDataSource1() {
      this.dataSource1 = dataSource1.filter(item => {
        if (!this.indexRegisterType) {
          return true
        }
        return item.type == this.indexRegisterType
      })
    },
    loadDataSource2() {
      this.dataSource2 = dataSource2.filter(item => {
        if (!this.indexRegisterType) {
          return true
        }
        return item.type == this.indexRegisterType
      })
    }
  },
  created() {
    // this.loadDataSource1()
    // this.loadDataSource2()
    this.getCurrentDayOfValue();
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;

  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.item-group {
  .more-btn {
    margin-bottom: 13px;
    text-align: center;
  }
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
}

@media only screen and (min-width: 1600px) {
  .list-content-item {
    margin-left: 60px;
  }
}

@media only screen and (max-width: 1300px) {
  .list-content-item {
    margin-left: 20px;
  }

  .width-hidden4 {
    display: none;
  }
}

.list-content-item {
  span {
    line-height: 20px;
  }
}

.list-content-item {
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.anty-list-cust {
  .ant-list-item-meta {
    flex: 0.3 !important;
  }
}

.anty-list-cust {
  .ant-list-item-content {
    flex: 1 !important;
    justify-content: flex-start !important;
    margin-left: 20px;
  }
}
</style>
